<script setup lang='ts'>
//import { Plus } from '@element-plus/icons-vue';

import SVG from '@/components/SVGtest/index.vue';
import { h, ref } from 'vue';
import { useRouter,useRoute } from "vue-router"
import { ElNotification } from "element-plus"
//引入当前时间
import { getTime } from "@/utils/getTime"
//引入用户相关的小仓库
import { store } from "@/stores/modules/user"

let userStore = store();
console.log(userStore.netName)
//获取路由  
let $router = useRouter();
let $route  = useRoute();
//按钮加载效果
let loading = ref(false)
//图标

//图标
let colorUse = ref('')
let colorPassworld = ref('')
//用户名和密码
let loginForm = ref({
    username: '',
    password: ''
})

const iconUser = () => {
    return h(SVG, { name: 'yonghu', color: colorUse.value })//h函数是用于创建虚拟DOM元素的函数，它是"hyperscript"的缩写。虚拟DOM元素是Vue在底层用于构建和更新DOM的一种数据结构。
}
const iconPassworld = () => {
    return h(SVG, { name: 'lock', color: colorPassworld.value })//h函数是用于创建虚拟DOM元素的函数，它是"hyperscript"的缩写。虚拟DOM元素是Vue在底层用于构建和更新DOM的一种数据结构。
}
//鼠标进入图标换色
const changeUseColor = () => {
    colorUse.value = "#409eff"
}
const changePassworldColor = () => {
    colorPassworld.value = "#409eff"
}
//鼠标离开图标换色  

const reUseColor = () => {
    if (loginForm.value.username === '' || loginForm.value.username.length < 3 || loginForm.value.username.length > 10) {
        colorUse.value = "red"
        return
    }
    colorUse.value = ""
}
const rePassworldColor = () => {
    if (loginForm.value.password === '' || loginForm.value.password.length < 5 || loginForm.value.password.length > 11) {
        colorPassworld.value = "red"
        return
    }
    colorPassworld.value = ""
}
//获取el-form组件
let loginFormRef = ref();
//登录按钮
const login = async () => {
    if(loginForm.value.username.length == 0){
        colorUse.value = "red"
    }
    if(loginForm.value.password.length == 0){
        colorPassworld.value = "red"
    }
    //保证全部表单项校验通过再发请求
//validate对整个表单的内容进行验证。接收一个回调函数,或返回Promise。如果校验不通过，不会发请求
   
    await loginFormRef.value.validate();
    //点击按钮开始加载
    loading.value = true
    //通知仓库发请求
    try {
        await userStore.userLogin(loginForm.value)
        //登陆成功后停止加载
        loading.value = false
        //编程式导航跳转到主页面
        let redirect:any = $route.query.redirect
        $router.push({path:redirect||"/"})
        await userStore.userInfo()
        //登录成功的提示消息
        ElNotification({
            title: `HI${userStore.netName},${getTime()}`,
            message: '登录成功',
            type: 'success',
        })
    } catch (error: any) {
        //登陆失败后停止加载
        loading.value = false
        //登陆失败的提示信息
        ElNotification({
            title: '登录失败',
            message: error.message,
            type: 'error',
        })
    }
}
//自定义表单校验配置对象那
const validatorUsername = (rule:any,value:any,callback:any)=>{
    //rule为数组的校验规则对象
    //value为表单元素文本内容
    //callbackd为一个函数，如果符合条件则通过，若失败则注入错误的提示信息
    rule = '';
    
    if(value.length == 0){
        callback(new Error("用户名不能为空"))
    }
    if(!(/^[a-z]+$/i.test(value))){
        callback(new Error("用户名仅由英文字母组成"))
    }
    else if(value.length<3||value.length>10){
        callback(new Error("用户名长度在3-10之间"))
    }
    else{
        callback();
    }
}
const validatorPassword = (rule:any,value:any,callback:any)=>{
    rule = ''
    console.log(rule)
    if(value.length == 0){
        callback(new Error("密码不能为空"))
    }
    if(!(/^\d+$/g.test(value))){
        callback(new Error("密码仅由数字组成"));
    }
    else if(value.length<5||value.length>11){
        callback(new Error("密码的长度在5-11之间"))
    }
    else{
        callback();
    }

}
//定义表单校验需要的配置对象
const rules = {
    username: [
        //普通的校验规则
        // {
        //     required: true,
        //     message: "用户名不能为空",
        //     trigger: "blur"
        // },
        // {
        //     min: 3,
        //     max: 10,
        //     message: "用户名长度在3-10之间",
        //     trigger: "blur"
        // }
    //自定义表单校验规则
        { trigger:"blur" , validator:validatorUsername}
    ],
    password: [
        //  //普通的校验规则
        // {
        //     required:true,
        //     message:"密码不能为空",
        //     trigger:"blur" //触发校验表单的时机
        // },
        // {
        //     min:5,
        //     max:11,
        //     message:"密码长度在5-11之间",
        //     trigger:"blur"
        // }
    //自定义表单校验规则
        { trigger:"blur", validator:validatorPassword }
    ]
}

</script>

<template>
    <div class="container">
        <!-------layout布局-------->
        <el-row>
            <el-col :span="12" :xs="0">左</el-col>
            <el-col :span="12" :xs="24">
                <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
                    <h1>欢迎来到创智</h1>
                    <el-form-item prop="username">
                        <el-input type="text" placeholder="请输入用户名" :prefix-icon="iconUser" class="ipt"
                            @click="changeUseColor()" @blur='reUseColor()' v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="请输入密码" :prefix-icon="iconPassworld" class="ipt"
                            @click="changePassworldColor()" @blur='rePassworldColor()' v-model="loginForm.password"
                            show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="btn" :loading="loading" @click="login()">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

    </div>
</template>

<style lang="less" scoped>
.container{
    width: 100%;
    height: 100vh;
    background: url("@/assets/images/135.png") no-repeat;
    background-size: cover;
    
}
form {
    margin-top: 22%;
    width: 300px;
    height: 300px;

    h1{
        color: #31fdff;
    }

    .btn {
        width: 300px;
    }
}
</style>